<template>
    <scroll-view scroll-y scroll-with-animation style="height: calc(100% - 55px)" @scroll="scrollEvent">
        <!--可视区域里所有数据的渲染区域-->
        <view :style="{position: 'absolute', top: $cache.virtualListConfig.top + 'px'}">
            <view class="music-item flex" :class="{ active: item.id == playInfo.id }" v-for="(item, index) in musicList"
                :key="item.id" @click="handlePlayMusic(item)">
                <image v-if="!item.lazyLoad" :src="'/static/image/music/cover.png'" @load="$lazyLoadImage($event,item)"
                    mode="widthFix" class="music-img"></image>
                <image v-if="item.lazyLoad" :src="item.cover?item.cover:'/static/image/music/cover.png'"
                    lazy-load="true" mode="widthFix" class="music-img"></image>
                <view class="music-info">
                    <view class="music-name text-overflow">{{ item.title }}</view>
                    <view class="music-singer text-overflow flex">
                        <span class="small-icon">{{ item.additional.song_tag.artist }}</span>
                        <span
                            class="small-icon">{{ item.additional.song_audio.bitrate/1000 + '/' + item.additional.song_audio.codec }}</span>
                        <!-- <span class="small-icon">{{ item.id }}</span> -->
                        <span class="small-icon">{{ item.additional.song_tag.album }}</span>
                        <span v-if="item.additional.song_tag.year!=0"
                            class="small-icon">{{ item.additional.song_tag.year  }}</span>

                    </view>
                </view>
                <view class="music-icons">
                    <image class="iconfont iconImage" v-if="item.id == $cache.loadMusicId"
                        src="/static/image/icon/loading1.gif"></image>
                </view>
            </view>
        </view>
    </scroll-view>
</template>

<script>
    import {
        mapState
    } from 'vuex';
    export default {
        props: {
            //加载的所有音乐列表
            allMusicList: {
                type: Array,
                default: []
            }
        },
        computed: mapState({
            playInfo: state => state.playInfo
        }),
        data() {
            return {
                //当前音乐列表
                musicList: []
            };
        },
        mounted() {
            this.showMusicList();
        },
        methods: {
            /**
             * 显示一部分音乐
             */
            showMusicList() {
                let pageSize = this.$cache.virtualListConfig.showNum
                let start = this.musicList.length
                console.log('显示一部分音乐', pageSize, start, this.allMusicList.length, this.allMusicList)
                for (let i = start; i < this.allMusicList.length; i++) {
                    if (i >= pageSize + start) {
                        break
                    }
                    this.musicList.push(this.allMusicList[i])
                }
                this.$forceUpdate()
            },
            /**
             * 区域滚动事件
             * @param {Object} e
             */
            scrollEvent(e) {
                this.$getShowList(e)
            },
            /**
             * 点击播放
             */
            async handlePlayMusic(item) {
                if (this.playInfo.id == item.id) {
                    uni.navigateTo({
                        url: '../play/index'
                    });
                    return;
                }
                this.$store.dispatch('playMusic', await this.$getPlayData(item));
            }
        }
    };
</script>
<style lang="scss" scoped>
    .music-item {
        //这里得固定高度以计算虚拟列表
        height: 70px;
        box-sizing: border-box;
        padding: 0 20px;
        align-items: center;
        margin-bottom: 10px;
        width: 100%;

        &:last-of-type {
            margin-bottom: 0;
        }

        &.active {
            background-image: linear-gradient(to right, rgba(247, 73, 79, 0.1), rgba(247, 73, 79, 0.05));

            .music-info {

                .music-name,
                .small-icon,
                .music-singer {
                    color: #f84e51 !important;
                }

                &::before {
                    content: '';
                    width: 4px;
                    height: 65px;
                    background-image: linear-gradient(to bottom, rgb(253, 117, 102), rgb(247, 73, 79));
                    position: absolute;
                    left: 0px;
                    top: 3px;
                }
            }
        }

        .music-img {
            width: 58px;
            border-radius: 6px;
        }

        .music-info {
            margin-left: 15px;
            // max-width: calc(100% - 75px);
            width: 90%;
            display: grid;

            .music-name {
                font-size: 30rpx;
                margin-bottom: 7px;
                color: #000;
            }

            .music-singer {
                color: rgba(0, 0, 0, 0.5);
                font-size: 24rpx;
                align-items: center;
                width: 100%;
                flex-flow: row wrap;

                .small-icon {
                    margin-right: 6px;
                    transform: scale(0.9);
                    color: rgba(0, 0, 0, 0.5);
                    font-size: 12px;
                    padding: 1px 3px;
                    border: 1px solid rgba(0, 0, 0, 0.2);
                    border-radius: 4px;
                }
            }
        }
    }
</style>
